<template>
  <div class="body">
    <!-- <div class="card" style="margin-bottom: 10px">
      <span style="margin-right: 30px">数据概况</span>
      <span style="margin-right: 6px; color: #333">时间范围</span>
      <el-date-picker
        v-model="commonParma.temporal_interval"
        class="input"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        size="mini"
      />
    </div> -->
    <!-- <div class="card index-box1" style="margin-bottom: 10px">
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">ROI</div>
        <div class="color-green">1.5</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">支出</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">营收</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">UVROI</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">联登ROI</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">URLROI</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">APIROI</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">CPAROI</div>
        <div class="line-color">10000</div>
      </div>
      <div :xs="6" :sm="6" :md="6" :lg="3" :xl="3">
        <div class="box1-title">CPSROI</div>
        <div class="line-color">10000</div>
      </div>
    </div>

    <div class="card" style="margin-bottom: 10px">
      <span style="margin-right: 30px">渠道检测</span>
      <el-radio-group v-model="checkType" size="mini">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="UV">UV</el-radio-button>
        <el-radio-button label="联登注册">联登注册</el-radio-button>
        <el-radio-button label="URL">URL</el-radio-button>
        <el-radio-button label="API">API</el-radio-button>
        <el-radio-button label="CPA">CPA</el-radio-button>
        <el-radio-button label="CPS">CPS</el-radio-button>
      </el-radio-group>
      <el-table
        id="table_id"
        :data="tableData"
        :border="true"
        size="mini"
      >
        <el-table-column label="ROI" prop="name" align="center" />
        <el-table-column label="总支出" prop="name" align="center" />
        <el-table-column label="总营收" prop="name" align="center" />
        <el-table-column label="总利润" prop="name" align="center" />
        <el-table-column label="UV成本" prop="name" align="center" />
        <el-table-column label="UV渠道收益" width="120" prop="name" align="center" />
        <el-table-column label="联登成本" prop="name" align="center" />
        <el-table-column label="联登渠道收益" width="120" prop="name" align="center" />
        <el-table-column label="API成本" prop="name" align="center" />
        <el-table-column label="API渠道收益" width="120" prop="name" align="center" />
        <el-table-column label="CPA成本" prop="name" align="center" />
        <el-table-column label="CPA渠道收益" width="120" prop="name" align="center" />
        <el-table-column label="CPS成本" prop="name" align="center" />
        <el-table-column label="CPS渠道收益" width="120" prop="name" align="center" />
      </el-table>
    </div> -->

    <el-row :gutter="10">
      <!-- <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <div class="card">
          <div style="width: 100%; min-height: 200px">
            <div class="box-title">今日机构情况</div>
            <el-row :gutter="10">
              <el-col :span="12" class="today-box2 ">
                <div class="box2-1 color-yellow">
                  <div class="title">进件成功量</div>
                  <div>250000</div>
                </div>
              </el-col>
              <el-col :span="12" class="today-box2">
                <div class="box2-2 color-blue2">
                  <div class="title">进件成功率</div>
                  <div>99%</div>
                </div>
              </el-col>
              <el-col :span="24" class="today-box2">
                <div class="box2-3 color-green2">
                  <div class="title">在线机构数</div>
                  <div>10000</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="width: 100%; min-height: 370px; margin-top: 10px;">
            <div class="box-title">在线机构占比</div>
            <div>...</div>
          </div>
        </div>
      </el-col> -->

      <!-- <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18"> -->
      <el-col>
        <el-row :gutter="60" style="margin: 0px 4px 10px" class="card">
          <el-col
            :xs="24"
            :sm="8"
            :md="8"
            :lg="8"
            :xl="8"
            class="today-box3 color-red"
          >
            <div class="box3-1">
              <div class="title">今日充值</div>
              <div>
                {{
                  organization_bill.recharge_money
                    ? organization_bill.recharge_money
                    : 0
                }}
              </div>
            </div>
          </el-col>
          <el-col
            :xs="24"
            :sm="8"
            :md="8"
            :lg="8"
            :xl="8"
            class="today-box3 color-blue"
          >
            <div class="box3-2">
              <div class="title">今日补单</div>
              <div>
                {{
                  organization_bill.replenish_money
                    ? organization_bill.replenish_money
                    : 0
                }}
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="today-box3">
            <div class="box3-3">
              <div class="title">今日退款</div>
              <div>
                {{
                  organization_bill.expense_money
                    ? organization_bill.expense_money
                    : 0
                }}
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row style="margin: 0px 4px 10px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="card">
              <div class="box-title">渠道进件监测</div>
              <div v-loading="pageLoading" class="echart-box-2">
                <Echar
                  ref="refEcahrtJjjj"
                  dom-id="echart-line-jjjj"
                  style="height: 340px"
                />
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="10" style="margin: 0">
          <el-col :xs="24" :sm="20" :md="16" :lg="16" :xl="16">
            <div class="card">
              <div style="width: 100%; min-height: 200px">
                <el-row type="flex" :gutter="18" class="echart-title">
                  <el-col :span="4" class="min-width-col">
                    <div class="box-title">渠道质量监控</div>
                  </el-col>
                  <el-col :span="4" class="min-width-col">
                    <el-input
                      placeholder="请输入渠道ID"
                      v-model="channel_id"
                      type="number"
                      clearable
                      prefix-icon="el-icon-search"
                      size="mini"
                    ></el-input>
                  </el-col>
                  <el-col :span="6" class="min-width-col">
                    <el-date-picker
                      v-model="time_interval"
                      class="input"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                      size="mini"
                    />
                  </el-col>
                  <el-col
                    :span="8"
                    :md="8"
                    class="min-width-col"
                    style="text-align: center"
                  >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="getQualityByChannelId"
                      >搜索</el-button
                    >
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="echart-box">
                      <div class="box-title-child">年龄</div>
                      <div v-loading="pageLoading" class="echart-box-2">
                        <Echar
                          ref="refEcahrtAge"
                          dom-id="echart-pie-age"
                          style="height: 160px"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="echart-box">
                      <div class="box-title-child">芝麻分</div>
                      <div v-loading="pageLoading" class="echart-box-2">
                        <Echar
                          ref="refEcahrtZmf"
                          dom-id="echart-pie-zmf"
                          style="height: 160px"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="echart-box">
                      <div class="box-title-child">公积金情况</div>
                      <div v-loading="pageLoading" class="echart-box-2">
                        <Echar
                          ref="refEcahrtGjj"
                          dom-id="echart-pie-gjj"
                          style="height: 160px"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="echart-box">
                      <div class="box-title-child">房产情况</div>
                      <div v-loading="pageLoading" class="echart-box-2">
                        <Echar
                          ref="refEcahrtFc"
                          dom-id="echart-pie-fc"
                          style="height: 160px"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="echart-box">
                      <div class="box-title-child">车产情况</div>
                      <div v-loading="pageLoading" class="echart-box-2">
                        <Echar
                          ref="refEcahrtCc"
                          dom-id="echart-pie-cc"
                          style="height: 160px"
                        />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="card">
              <div style="width: 100%; min-height: 380px">
                <div class="box-title">线索城市分布Top20</div>
                <div v-loading="pageLoading">
                  <Echar
                    ref="refCitytop"
                    dom-id="echart-cstop-box"
                    style="height: 390px"
                  />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <!-- <div class="body" style="color: #999;">暂未开发，敬请期待~</div> -->
</template>

<script>
import { initPickerOptions } from "@/utils/appUtil";
import { getDateDaysAgo, getStartOfDayTimestamp } from "@/utils/datetimeUtil";
import { apiStatisticData, getQualityByChannelId } from "@/api/apiCommon";
import Echar from "@/components/Echrat/echar.vue";

export default {
  name: "Index",
  components: {
    Echar,
  },
  data() {
    return {
      pageLoading: false,
      commonParma: {
        start_time: "",
        end_time: "",
        temporal_interval: [getDateDaysAgo(), new Date()],
      },
      channel_id: "",
      time_interval: [new Date(), new Date()],
      checkType: "all",
      tableData: [],
      pickerOptions: {},

      // 看板数据
      organization_bill: {
        expense_money: "0",
        recharge_money: "0",
        replenish_money: "0",
      },
    };
  },

  mounted() {
    const _this = this;
    _this.pickerOptions = initPickerOptions();

    // 看板数据
    _this.pageLoading = true;
    apiStatisticData()
      .then((res) => {
        if (res.code === 1) {
          const result = res.data;
          const chartData = result.statistics;
          _this.organization_bill = Object.assign(
            _this.organization_bill,
            chartData.organization_bill[0]
          );

          // 饼图
          _this.$refs.refEcahrtAge.initChart(
            _this.getPieOptions("年龄", [
              { value: chartData.clue_quality.age["0,19"], name: "0-19" },
              { value: chartData.clue_quality.age["20,40"], name: "20-40" },
              { value: chartData.clue_quality.age["41,50"], name: "41-50" },
              { value: chartData.clue_quality.age["51,max"], name: "51以上" },
            ])
          );
          _this.$refs.refEcahrtZmf.initChart(
            _this.getPieOptions("芝麻分", [
              {
                value: chartData.clue_quality.sesame_score["0,600"],
                name: "600以下",
              },
              {
                value: chartData.clue_quality.sesame_score["600,649"],
                name: "600-649",
              },
              {
                value: chartData.clue_quality.sesame_score["650,699"],
                name: "650-699",
              },
              {
                value: chartData.clue_quality.sesame_score["700,max"],
                name: "700以上",
              },
            ])
          );
          _this.$refs.refEcahrtGjj.initChart(
            _this.getPieOptions("公积金情况", [
              { value: chartData.clue_quality.house.have, name: "有" },
              { value: chartData.clue_quality.house.none, name: "无" },
            ])
          );
          _this.$refs.refEcahrtFc.initChart(
            _this.getPieOptions("房产情况", [
              {
                value: chartData.clue_quality.accumulation_fund.have,
                name: "有",
              },
              {
                value: chartData.clue_quality.accumulation_fund.none,
                name: "无",
              },
            ])
          );
          _this.$refs.refEcahrtCc.initChart(
            _this.getPieOptions("车产情况", [
              { value: chartData.clue_quality.car.have, name: "有" },
              { value: chartData.clue_quality.car.none, name: "无" },
            ])
          );
          // 绘制top图
          _this.$refs.refCitytop.initChart({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {},
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            yAxis: {
              type: "category",
              data: chartData.city_stats.map((item) => {
                return item.province_name;
              }),
            },
            series: [
              {
                data: chartData.city_stats.map((item) => {
                  return item.clue_num;
                }),
                type: "bar",
              },
            ],
          });

          // 时间渠道进件监测
          _this.$refs.refEcahrtJjjj.initChart({
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["总数", "申请数", "注册数", "成功", "失败"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: chartData.clue_stats.map((item) => {
                return item.datetime;
              }),
            },
            yAxis: {
              type: "value",
            },
            dataZoom: [
              {
                type: "slider",
                start: 0,
                end: 100,
              },
            ],
            series: [
              {
                name: "总数",
                type: "line",
                stack: "Total",
                data: chartData.clue_stats.map((item) => {
                  return item.count;
                }),
              },
              {
                name: "申请数",
                type: "line",
                stack: "Total",
                data: chartData.clue_stats.map((item) => {
                  return item.applying_count;
                }),
              },
              {
                name: "注册数",
                type: "line",
                stack: "Total",
                data: chartData.clue_stats.map((item) => {
                  return item.data_filled_count;
                }),
              },
              {
                name: "成功",
                type: "line",
                stack: "Total",
                data: chartData.clue_stats.map((item) => {
                  return item.application_submitted_count;
                }),
              },
              {
                name: "失败",
                type: "line",
                stack: "Total",
                data: chartData.clue_stats.map((item) => {
                  return item.application_fail_count;
                }),
              },
            ],
          });
        }
      })
      .finally(() => {
        _this.pageLoading = false;
      });
  },
  methods: {
    getPieOptions(name, data) {
      return {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} （{d}%）",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: name, // 名称
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    getQualityByChannelId() {
      const _this = this;
      console.log("this.time_interval:", this.time_interval);
      let start_time = getStartOfDayTimestamp(this.time_interval[0]);
      let end_time = getStartOfDayTimestamp(this.time_interval[1]) + 86400;
      getQualityByChannelId({
        channel_id: this.channel_id,
        start_time: start_time,
        end_time: end_time,
      })
        .then((res) => {
          if (res.code === 1) {
            const result = res.data;
            const qualityData = result.quality;
            _this.rendering(qualityData);
          }
        })
        .finally(() => {
          _this.pageLoading = false;
        });
    },
    rendering(data) {
      const _this = this;
      // 饼图
      _this.$refs.refEcahrtAge.initChart(
        _this.getPieOptions("年龄", [
          { value: data.age["0,19"], name: "0-19" },
          { value: data.age["20,40"], name: "20-40" },
          { value: data.age["41,50"], name: "41-50" },
          { value: data.age["51,max"], name: "51以上" },
        ])
      );
      _this.$refs.refEcahrtZmf.initChart(
        _this.getPieOptions("芝麻分", [
          { value: data.sesame_score["0,600"], name: "600以下" },
          { value: data.sesame_score["600,649"], name: "600-649" },
          { value: data.sesame_score["650,699"], name: "650-699" },
          { value: data.sesame_score["700,max"], name: "700以上" },
        ])
      );
      _this.$refs.refEcahrtGjj.initChart(
        _this.getPieOptions("公积金情况", [
          { value: data.house.have, name: "有" },
          { value: data.house.none, name: "无" },
        ])
      );
      _this.$refs.refEcahrtFc.initChart(
        _this.getPieOptions("房产情况", [
          { value: data.accumulation_fund.have, name: "有" },
          { value: data.accumulation_fund.none, name: "无" },
        ])
      );
      _this.$refs.refEcahrtCc.initChart(
        _this.getPieOptions("车产情况", [
          { value: data.car.have, name: "有" },
          { value: data.car.none, name: "无" },
        ])
      );
      // 绘制top图
      // _this.$refs.refCitytop.initChart({
      //     tooltip: {
      //       trigger: 'axis',
      //       axisPointer: {
      //         type: 'shadow'
      //       }
      //     },
      //     legend: {},
      //     grid: {
      //       left: '3%',
      //       right: '4%',
      //       bottom: '3%',
      //       containLabel: true
      //     },
      //     xAxis: {
      //       type: 'value',
      //       boundaryGap: [0, 0.01]
      //     },
      //     yAxis: {
      //       type: 'category',
      //       data: chartData.city_stats.map(item => { return item.province_name })
      //     },
      //     series: [
      //       {
      //         data: chartData.city_stats.map(item => { return item.clue_num }),
      //         type: 'bar'
      //       }
      //     ]
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  padding: 20px;
}
.box-title,
.box-title-child {
  margin-bottom: 10px;
}
.box-title-child {
  font-size: 14px;
}
#table_id {
  margin-top: 10px;
}
.index-box1 {
  display: flex;
  gap: 4px;
  font-size: 14px;
  > div {
    flex: 1;
  }
  div {
    text-align: center;
  }
  .box1-title {
    margin-bottom: 8px;
  }
}
.today-box3 {
  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    border-radius: 10px;
  }
  .title {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
  }
}
.box3-1 {
  background-color: rgba(255, 178, 178, 0.18);
}
.box3-2 {
  background-color: rgba(173, 194, 255, 0.18);
}
.box3-3 {
  background-color: rgba(255, 214, 173, 0.18);
}

.today-box2 {
  margin-bottom: 10px;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 78px;
    border-radius: 10px;
  }
  .title {
    margin-bottom: 8px;
  }
}
.box2-1 {
  background-color: rgba(255, 237, 55, 0.18);
}
.box2-2 {
  background-color: rgba(208, 232, 255, 0.59);
}
.box2-3 {
  background-color: rgba(71, 255, 122, 0.13);
}

.line-color {
  color: #409eff;
}
.color-green {
  color: rgb(0, 186, 22);
}
.color-green2 {
  color: #008525;
}
.color-red {
  color: #ff0000;
}
.color-blue {
  color: #0041ff;
}
.color-blue2 {
  color: #0082ff;
}
.color-yellow {
  color: #ec7400;
}

.echart-box {
  margin: 10px;
  border: 1px solid #409eff; // #F56C6C;
  border-radius: 20px;

  .box-title-child {
    padding: 20px 20px;
  }
  .echart-box-2 {
    width: 100%;
    margin-bottom: 10px;
  }
}

.echart-title {
  padding-bottom: 10px;
}
</style>
